<template>
  <div class="base-table ivu-table-wrapper" v-if="checkTable">
    <div class="ivu-table ivu-table-default ivu-table-border">
      <table class="iv-table" cellspacing="0" cellpadding="0" border="0">
        <tbody class="ivu-table-tbody">
          <tr v-for="(tr, index) in tableData" :key="index">
            <template v-for="(td, index) in tr">
              <!--th与td对应的key值不可相等 -->
              <th :key="'tr' + index">
                <div class="ivu-table-cell">{{ td.name }}</div>
              </th>
              <td :key="'td' + index">
                <div class="ivu-table-cell">{{ td.value }}</div>
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import { chunk } from "@utils/tools.ts";

@Component
export default class BaseTable extends Tools {
  @Prop()
  private value!: Array<any>;
  /**
   * tr展示td的个数
   */
  @Prop({ default: 3 })
  private row!: number;

  /**
   * 表格数据
   */
  private get tableData() {
    return chunk(this.value, this.row);
  }

  /**
   * 表格展示要求
   */
  private get checkTable() {
    if (this.value.length % this.row === 0) {
      return true;
    } else {
      this.$Message.error("非法表格格式");
      return false;
    }
  }
}
</script>
<style lang="stylus" scoped>
.base-table {
  .iv-table {
    width: 100%
    box-sizing: border-box
    // border-left: 1px solid #e8eaec
    // border-top: 1px solid #e8eaec
  }
}
</style>
